<template>
  <div class="userInforEntry">
    <div class="entryForm">
      <van-form @submit="submitInfo" validate-trigger="onSubmit">
        <van-field class="identity border_r8 margin_b8 f_14" readonly clickable name="identityId" input-align="right" right-icon="arrow" :value="identityValue.text" label="身份类型" placeholder="请选择身份类型" @click="showIdentityPicker = true" :rules="[{required: true, trigger: 'onChange'}]" />
        <div class="mainForm bg_w border_r8 margin_b8">
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">姓名</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.real_name" name="real_name" placeholder="请输入您的姓名" :rules="[{required: true}]" />
            </div>
          </div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">手机号</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.mobile" name="mobile" placeholder="请输入您的手机号" :rules="[{required: true, validator: validatorPhone}]" />
            </div>
          </div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">行业</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.industry" name="industry" placeholder="请输入您的行业" :rules="[{required: true}]" />
            </div>
          </div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">公司名</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.company" name="company" placeholder="请输入您的公司名" :rules="[{required: true}]" />
            </div>
          </div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">品牌名</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.brand" name="brand" placeholder="请输入您的品牌名" :rules="[{required: true}]" />
            </div>
          </div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">职位</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.post" name="post" placeholder="请输入您的职位" :rules="[{required: true}]" />
            </div>
          </div>
        </div>
        <div class="mainForm bg_w border_r8 margin_b8">
          <div class="f_14 tc_5" style="padding: 1.5rem 1.2rem; box-sizing: border-box">您的联系人(千誉集团内的证明人)</div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">所属公司</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.belong_com" name="belong_com" placeholder="请输入联系人的所属公司" :rules="[{required: true}]" />
            </div>
          </div>
          <div class="formItem bg_w border_r4 flex_r_fs_c">
            <div class="f_14 tc_5">联系人</div>
            <div style="flex: 4">
              <van-field class="itemInput f_14" v-model="formData.belong_user" name="belong_user" placeholder="输入姓名, 最好后面加上电话号码" :rules="[{required: true}]" />
            </div>
          </div>
          <div class="f_12 tc_8" style="padding: 0.6rem 1.2rem; box-sizing: border-box; margin-left: 7rem">方便管理员审核和告知联系人</div>
        </div>
        <div style="margin-top: 2rem">
          <van-button class="submitBtn f_16" color="#31A2A3" :disabled="btnDisable" :loading="btnDisable" round block type="info" native-type="submit"> 提交资料 </van-button>
        </div>
      </van-form>
      <!-- <div class="footerLogo">
        <van-image width="6.8rem" height="1.6rem" fit="cover" :src="require('@/assets/logo_qianyu.png')" />
      </div> -->
    </div>
    <van-popup v-model="showIdentityPicker" position="bottom">
      <van-picker show-toolbar :columns="identityData" @confirm="onIdentityConfirm" @cancel="showIdentityPicker = false" />
    </van-popup>
    <!-- <div class="footer bg_w">
      <div class="footerBtn bg_g tc_w f_16" @click="submitInfo">提交资料</div>
    </div> -->
  </div>
</template>

<script>
import loginApi from '@/api/login'
import {getOpenId} from '@/utils/auth'
export default {
  data() {
    return {
      showIdentityPicker: false,
      btnDisable: false,
      identityData: [
        {text: '个人', id: 0},
        {text: '合作商', id: 1}
      ],
      identityValue: {
        text: '个人',
        id: 0
      },
      formData: {
        open_id: '',
        type: 0,
        real_name: '',
        mobile: '',
        industry: '',
        company: '',
        brand: '',
        post: '',
        belong_com: '',
        belong_user: ''
      }
    }
  },
  methods: {
    validatorPhone(val) {
      return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|19[0-9]|14[57])[0-9]{8}$/.test(val)
    },
    submitInfo(data) {
      let _this = this
      _this.btnDisable = true
      delete data.identityId
      data.type = this.identityValue.id
      data.open_id = getOpenId()
      loginApi.registerAccount(data).then((res) => {
        if (!this.$tools.isNullOrEmpty(res.data.userinfo.token) && res.data.userinfo.status === 'hidden') {
          this.$dialog
            .alert({
              title: '提示',
              message: '您的个人信息已提交成功,\n请联系您的联系人审核!',
              messageAlign: 'center',
              confirmButtonColor: '#31A2A3'
            })
            .then(() => {
              this.$tools.goHref('index')
            })
        }
        _this.btnDisable = false
      })
    },
    onIdentityConfirm(value) {
      this.identityValue = value
      this.showIdentityPicker = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.userInforEntry {
  padding: 0.8rem 1.4rem;
  box-sizing: border-box;
}
.identity {
  min-height: 4rem;
  line-height: 4rem;
}
.mainForm {
  overflow: hidden;
  padding: 0.6rem 0;
  .formItem {
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    width: 100%;
    div:nth-child(1) {
      // margin-right: 1.2rem;
      flex: 1;
    }
    .itemInput {
      background-color: #f5f5f5;
      border-radius: 0.4rem;
      min-height: 4.6rem;
    }
  }
}
.submitBtn {
  height: 4rem;
}
.footerLogo {
  margin-top: 5.5rem;
  text-align: center;
}
</style>

<style>
.entryForm .identity .van-field__control {
  color: #31a2a3;
}
</style>
